<template>
  <div class="min-h-screen">
    <!-- 主体内容 -->
    <div class="pt-16">
      <!-- 标签头部信息 -->
      <div class="bg-gradient-to-r to-indigo-700 text-white py-12">
        <div class="max-w-7xl mx-auto px-4">
          <div
            class="flex flex-col md:flex-row items-start md:items-center justify-between mb-4"
          >
            <div>
              <div class="flex items-center">
                <tag-outlined class="text-2xl mr-3" />
                <!--                                <h1 class="text-3xl font-bold">{{ currentTag.name }}</h1>-->
                <h1 class="text-3xl font-bold">{{ route.params.name }}</h1>
              </div>
              <p class="mt-3 text-blue-100 max-w-2xl">
                {{ currentTag.description }}
              </p>
            </div>
            <div class="mt-4 md:mt-0 flex items-center space-x-4">
              <div class="bg-white/10 rounded-lg px-4 py-3 text-center">
                <div class="text-2xl font-bold">
                  {{ currentTag.articleCount }}
                </div>
                <div class="text-xs text-blue-100">文章数量</div>
              </div>
              <div class="bg-white/10 rounded-lg px-4 py-3 text-center">
                <div class="text-2xl font-bold">
                  {{ currentTag.totalViews }}
                </div>
                <div class="text-xs text-blue-100">总阅读量</div>
              </div>
            </div>
          </div>
          <!-- 相关标签 -->
          <div class="mt-6">
            <div class="text-blue-100 mb-2">相关标签：</div>
            <div class="flex flex-wrap gap-2">
              <router-link
                v-for="tag in relatedTags"
                :key="tag.id"
                :to="'/tag-article/' + tag.name + '/' + tag.id"
                class="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-full text-sm transition-colors duration-200 cursor-pointer"
              >
                {{ tag.name }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 文章列表区域 -->
      <div class="max-w-7xl mx-auto px-4 py-8 bg-gray-50 list">
        <div class="flex flex-col lg:flex-row gap-8">
          <!-- 左侧文章列表 -->
          <div class="lg:w-2/3">
            <!-- 筛选和排序 -->
            <div
              class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-wrap items-center justify-between"
            >
              <div class="flex items-center space-x-2 text-sm text-gray-600">
                <span>共 {{ currentTag.articleCount }} 篇文章</span>
              </div>
              <div class="flex items-center space-x-1">
                <a-radio-group
                  v-model:value="params.sortType"
                  button-style="solid"
                  size="default"
                  @change="getTagDetail(Number(route.params.id), 'change')"
                >
                  <a-radio-button value="latest">最新</a-radio-button>
                  <a-radio-button value="popular">最热</a-radio-button>
                  <a-radio-button value="default">默认</a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <!-- 文章列表 -->
            <div class="space-y-6">
              <div
                v-for="article in currentTag.posts"
                :key="article.id"
                class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 cursor-pointer overflow-hidden"
              >
                <div class="flex flex-col md:flex-row">
                  <div class="md:w-1/3 h-48 md:h-auto overflow-hidden">
                    <img
                      :src="article.coverImage"
                      :alt="article.title"
                      class="w-full h-full object-coverImage"
                    />
                  </div>
                  <div class="md:w-2/3 p-5">
                    <h3 class="text-xl font-medium mb-2">
                      {{ article.title }}
                    </h3>
                    <div class="flex items-center text-xs text-gray-500 mb-3">
                      <calendar-outlined class="mr-1" />
                      <span>{{ article.createdAt }}</span>
                      <div class="mx-2 w-1 h-1 rounded-full bg-gray-300"></div>
                      <eye-outlined class="mr-1" />
                      <span>{{ article.views }} 阅读</span>
                      <div class="mx-2 w-1 h-1 rounded-full bg-gray-300"></div>
                      <comment-outlined class="mr-1" />
                      <span>{{ article.likes }} 点赞</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                      {{ article.excerpt }}
                    </p>
                    <div class="flex flex-wrap items-center justify-between">
                      <div class="flex flex-wrap gap-2 mb-2 md:mb-0">
                        <span
                          v-for="(tag, index) in article.tags"
                          :key="index"
                          class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full"
                        >
                          {{ tag }}
                        </span>
                      </div>
                      <a-button
                        type="primary"
                        size="small"
                        @click="handleViewDetails(article.id, article.title)"
                        class="!rounded-button whitespace-nowrap cursor-pointer"
                      >
                        阅读全文
                        <template #icon>
                          <right-outlined />
                        </template>
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <div class="mt-8 flex justify-center">
              <a-pagination
                v-model:current="params.page"
                :total="currentTag.articleCount"
                :page-size="params.pageSize"
                show-quick-jumper
                show-size-changer
                :page-size-options="['6', '12', '24']"
                @change="onPageChange"
                @showSizeChange="onShowSizeChange"
              />
            </div>
          </div>
          <!-- 右侧边栏 -->
          <div class="lg:w-1/3 space-y-6">
            <!-- 标签信息卡片 -->
            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
              <h3 class="text-lg font-bold mb-4 flex items-center">
                <info-circle-outlined class="mr-2 text-blue-500" />
                关于此标签
              </h3>
              <p class="text-gray-600 text-sm mb-4">
                {{ currentTag.description }}
              </p>
              <div class="space-y-3">
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">创建时间：</span>
                  <span>{{ currentTag.createdAt }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">文章数量：</span>
                  <span>{{ currentTag.articleCount }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">总阅读量：</span>
                  <span>{{ currentTag.totalViews }}</span>
                </div>
                <!-- <div class="flex justify-between text-sm">-->
                <!--   <span class="text-gray-600">关注人数：</span>-->
                <!--   <span>{{ currentTag.followerCount }}</span>-->
                <!-- </div>-->
              </div>
            </div>
            <!-- 热门文章 -->
            <HotArticle />
            <!-- 标签云 -->
            <TagsCloud :all-tags="allTags" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import {
  CalendarOutlined,
  CommentOutlined,
  EyeOutlined,
  InfoCircleOutlined,
  RightOutlined,
  TagOutlined,
} from "@ant-design/icons-vue";
import type { BlogVo, TagVo } from "@/type/post.ts";
import { useRoute, useRouter } from "vue-router";
import { tagApi } from "@/api";
import type { TagDetail } from "@/type";
import { filterHtmlTags, stringToArray, truncateString } from "@/utils";
import dayjs from "dayjs";
import TagsCloud from "@/views/TagArticle/TagsCloud.vue";
import HotArticle from "@/views/TagArticle/HotArticle.vue";

const route = useRoute();
const router = useRouter();
// 当前标签信息
const currentTag = ref<TagDetail>({
  articleCount: 0,
  count: "",
  createdAt: "",
  description: "",
  id: 0,
  name: "",
  status: "",
  totalViews: 0,
  updatedAt: "",
  posts: [],
});
// 相关标签
const relatedTags = ref<TagVo[]>([]);
// 所有标签
const allTags = ref<TagVo[]>([]);
// 分页和排序
const params = reactive({
  page: 1,
  pageSize: 6,
  sortType: "latest",
});

// 查看文章详情
const handleViewDetails = (id: number, title: string) => {
  router.push({ name: "blogItem", params: { id, title } });
};

// 分页变化
const onPageChange = (page: number) => {
  params.page = page;
  getTagDetail(Number(route.params.id));
};
// 每页条数变化
const onShowSizeChange = (current: number, size: number) => {
  params.page = current;
  params.pageSize = size;
  getTagDetail(Number(route.params.id));
};
// 获取标签详情
const getTagDetail = async (id: number, change: string = "") => {
  if (change !== "") {
    params.page = 1;
  }
  const data = await tagApi.getTagDetail(id, params);
  currentTag.value = {
    ...data,
    posts: data.posts.map((item: BlogVo) => {
      return {
        ...item,
        tags: stringToArray(item.tags as string),
        createdAt: dayjs(String(item.createdAt)).format("YYYY-MM-DD HH:mm:ss"),
        excerpt: truncateString(filterHtmlTags(item.excerpt), 50),
      };
    }),
  };
};

// 获取所有标签
const getTagList = async () => {
  const res = await tagApi.getTagList();
  allTags.value = res.list;
  // 分割相关标签
  relatedTags.value = res.list.filter(
    (item: TagVo) => item.id !== Number(route.params.id),
  );
  // 只显示5个
  relatedTags.value = relatedTags.value.slice(0, 5);
};
// 监听参数变化
watch(
  () => route.params.id,
  async (id) => {
    await getTagDetail(Number(id));
  },
);

onMounted(() => {
  getTagDetail(Number(route.params.id));
  getTagList();
});
</script>

<style scoped>
.list {
  background: rgb(255, 255, 255, 0.8);
  border-radius: 5px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:deep(.ant-input-search .ant-input) {
  border-radius: 8px;
}

:deep(.ant-btn-primary) {
  background-color: #1890ff;
}

:deep(.ant-input-group-addon) {
  background-color: transparent;
}

:deep(.ant-pagination-item-active) {
  border-color: #1890ff;
}

:deep(.ant-pagination-item-active a) {
  color: #1890ff;
}

:deep(.ant-radio-button-wrapper-checked) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)
) {
  color: white;
}
</style>
